<template>
     <div class="data-strengthen w  box-b">
    <div class="box-b h el-card p10">
      <div class="header f-b a-i-c">
        <div class="category-title">
          <el-button type="primary" icon="plus" @click="editDataStrengthen()">新建增强任务</el-button>
        </div>
        <div class="f-e">
          <el-input v-model="dataCollectionName" placeholder="输入数据集名称或ID" clearable></el-input>
          <el-button type="primary" class="m-l4" icon="search" @click="queryLike">查询</el-button>
        </div>
      </div>
      <div class="data-list" style="height:calc(100% - 70px)">
        <div class="data-li m-b10" >
          <div class="li-box customer-table">
            <div class="el-table">
              <div class="el-table__header">
                <div class="thead">
                  <div class="tr">
                    <th v-for="(column, c) in dataCollectionLayout" :key="c"
                      :style="[{ width: column.width || 'auto' }, column.style || {}]"
                      :class="[column?.class]" class="is-leaf el-table__cell">
                      {{ column.label }}
                    </th>
                  </div>
                </div>
              </div>
              <div class="el-table__body-wrapper" style="height:calc(100% - 30px)">
                <div class="tbody w h" v-if="listData && listData.length > 0">
                  <div class="el-table__row" tr v-for="(li, l) in listData" :key="l">
                    <div v-for="(column, c) in dataCollectionLayout" :key="c"
                      :style="[{ width: column.width || 'auto' }, column.style || {}]"
                      :class="[column?.class]" class="el-table__cell">
                      <template v-if="column.prop != 'edit'">
                        <span v-html="getRenderTableValue(column, li)"></span>
                      </template>
                      <template v-else>
                        <!-- <el-button type="text" class="m-r2">查看任务详情</el-button> -->
                        <el-button type="text" class="m-r2" @click="deleteImageBoss(li.id)">删除</el-button>
                      </template>
                    </div>
                  </div>
                </div>
                <div v-if="!listData || listData.length <= 0" class="w h a-i-c f-c ">
                  <el-empty :image-size="80" description="没有找到相关信息" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w f-e m-t5">
        <el-pagination small background v-model:current-page="current" :page-size="size"
          layout="prev, pager, next" @size-change="pageSizeHandler"
          @current-change="pageCurrentHandler" :total="total" class="mt-4" />
      </div>
    </div>

  </div>
</template>
<script lang="ts">
import {dataStrengthen} from '@/apis/dataStrengthen';
import { imageApis,RequestCode } from '@/server/base'
import { el } from 'element-plus/es/locale';
export default {
    name:'DataStrengthen',
    data(){
        return {
        current: 1,
      size: 20,
      total: 1,
        dataCollectionLayout: [
        { prop: 'id ', label: '序号', width: '140px',
           format(val: string | number, row: any) {
             return row?.id
          }
        },
        { prop: 'type', label: '增强类型', width: '140px' ,
             format(val: string | number, row: any) {
            return `<div class="f-c a-i-c"><div  w-10 h-10 r">&nbsp;&nbsp;</div>${val == 1 ? '图像检测' : ''}</div> `
          }
        },
        { prop: 'method', label: '增强方式', width: '140px',
              format(val: any, row: any) {
                for(let i=0;i<val.length;i++){
                  if(val[i]=='1'){
                  
                  val= val.replace(val[i],'翻转')
                  }
                  else  if(val[i]=='2'){
                  val=  val.replace(val[i],'镜像')
                  }
                    else if(val[i]=='3'){
                  val=  val.replace(val[i],'裁剪')
                  }
                }
               return `<div class="f-c a-i-c"><div  w-10 h-10 r">&nbsp;&nbsp;</div>${val}</div> `
          }
        },
         { prop: 'politic', label: '算子处理策略', width: '140px',
               format(val: string | number, row: any) {
            return `<div class="f-c a-i-c"><div w-10 h-10 r">&nbsp;&nbsp;</div>${val == 1 ? '串行叠加' : '并行遍历'}</div> `
          }
         },
        // { prop: 'startTime', label: '开始时间', width: '140px' },
        { prop: 'inputPhotoId', label: '增强前数据集', width: '140px' },
        { prop: 'outputPhotoId', label: '增强后数据集', width: '140px' },
        //   {
        //   prop: 'status',
        //   label: '增强状态',
        //   width: '140px',
        //   format(val: string | number, row: any) {
        //     return `<div class="f-c a-i-c"><div class="${
        //       val == 1 ? 'b-s' : 'b-d'
        //     } w-10 h-10 r">&nbsp;&nbsp;</div>${val == 1 ? '已完成' : '未完成'}</div> `
        //   }
        // },
        { prop: 'edit', label: '操作', class: 'f-g1', style: 'min-width:240px' }
      ],

      listData: [
      ],
      dataCollectionName:''
        }
    },
    created(){
      this.getDataStrengthen()
    },
    methods:{
      queryLike(){
        if(this.dataCollectionName.length!=0){
             dataStrengthen.queryLike(this.dataCollectionName).then((res:RequestCode)=>{
          this.listData=res.data
          this.total=this.listData.length
        })
        }else{
            this.getDataStrengthen()
        }
     
      },
        getDataStrengthen(){
          dataStrengthen.getDataStrengthen({current:this.current,size:this.size}).then((res:RequestCode)=>{
            this.listData=res.data.records
            this.total=res.data.total
          })
        },
        deleteImageBoss(id:number|string){
           (this as any).$confirm('确定删除该标签吗?', '警告').then(()=>{
                    dataStrengthen.deleteImageBoss(id).then((res:RequestCode)=>{
            (this as any).$message.success('删除成功')
              this.getDataStrengthen()
          })
           }).catch(()=>{})
   
        },
    getRenderTableValue(layout: any, row: any) {
      const { prop, format } = layout
      if (typeof format === 'undefined' && !row[prop]) {
        return ''
      }
      if (typeof format === 'function') {
        return format(row[prop], row)
      }
      return row[prop]
    },
        pageSizeHandler(value: number) {
      this.size = value
      this.current = 1
        this.getDataStrengthen()
    },
    pageCurrentHandler(value: number) {
      this.current = value
        this.getDataStrengthen()
    },
    editDataStrengthen(){
     (this as any).$router.push('/editDataStrengthen')
    }
  }
}
</script>
<style lang="scss" scoped>
.data-strengthen{
    overflow-y: auto;
}
</style>